// 各工具尺寸
export const toolsize: AnyObject = {
  div: {
    width: 100,
    height: 50,
    position: 'absolute',
    type: 'div',
    class: [
      'el-button', 'el-button--primary'
    ],
    innerText: '文字'
  },
  button: {
    width: 100,
    height: 50,
    position: 'absolute',
    type: 'button',
    class: [
      'el-button', 'el-button--primary'
    ],
    innerText: '按钮'
  },
  card: {
    width: 300,
    height: 300,
    position: 'absolute',
    type: 'card',
    class: [
      'el-card', 'is-always-shadow', 'box-card',
    ],
    innerText: '卡片'
  },
  carousel: {
    width: 400,
    height: 300,
    position: 'absolute',
    type: 'carousel',
    class: [
      'el-carousel',
    ],
    innerText: '跑马灯'
  },
  table: {
    width: 400,
    height: 400,
    position: 'absolute',
    type: 'table',
    innerText: '表格'
  }
}

// 工具箱内容
export const toolkit: AnyObject[] = [
  {
    id: 0,
    title: '基础组件',
    subTools: [
      {
        id: 0,
        name: 'freeComps',
        subTitle: '按钮',
        type: 'button',
      },
      {
        id: 1,
        name: 'freeComps',
        subTitle: '卡片',
        type: 'card',
      },
      {
        id: 2,
        name: 'freeComps',
        subTitle: '文字',
        type: 'div',
      },
    ]
  },
  {
    id: 1,
    title: '数据展示组件',
    subTools: [
      {
        id: 0,
        name: 'freeComps',
        subTitle: '走马灯',
        type: 'carousel',
      },
      {
        id: 1,
        name: 'freeComps',
        subTitle: '表格',
        type: 'table'
      },
    ]
  }
]


// 非element-plus的组件
const localElementLibs: Set<string> = new Set([
  'div'
])


/**
 * @function createCode
 * @param _this 上下文对象
 * @param drag 编辑区的组件内容
 * @description 生成页面代码
 */
export const createCode: Function = (_this: any, drag: ArrayObject): void => {

  const canvas = document.getElementById("canvas")

  if (canvas) {
    let innerElement = ''
    for (let type in drag) {

      // 如果不是ElementUI的组件
      if (localElementLibs.has(type)) {
        drag[type].forEach((item) => {
          innerElement += `<${type} :style=\"\'position: ${item.position};left: \' + ${item.left / canvas.clientWidth}*pageW + \'px; top: \' + ${item.top / canvas.clientHeight}*pageH + \'px;width: \` + ${item.width}*pageW/${canvas.clientWidth} + \`px;height: \' + ${item.height}*pageH/${canvas.clientHeight} + \'px;\'\" type=\"primary\">${item.text}</${type}>\n`
        })
      } else {
        drag[type].forEach((item) => {
          innerElement += `<el-${type} :style=\"\'position: ${item.position};left: \' + ${item.left / canvas.clientWidth}*pageW + \'px; top: \' + ${item.top / canvas.clientHeight}*pageH + \'px;width: \' + ${item.width}*pageW/${canvas.clientWidth} + \'px;height: \' + ${item.height}*pageH/${canvas.clientHeight} + \'px;\'\" type=\"primary\">${item.text}</el-${type}>\n`
        })
      }
    }
    
    let html: string =
`<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Created Result</title>
</head>

<body>

  <div id="vueController">
    ${innerElement}
  </div>

  <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="./global.css"></link>

  <script>
    var test = new Vue({
      el: "#vueController",
      data() {
        return {
          pageW: 0,
          pageH: 0,
        }
      },
      methods: {

        // 页面自适应
        resize() {
          const myObserver = new ResizeObserver(() => {
            const main = document.getElementById('vueController');
            this.pageW = main.clientWidth;
            this.pageH = main.clientHeight;
          })
          const main = document.getElementById('vueController');
          myObserver.observe(main);
        }
      },
      mounted() {

        this.resize();
      }
    })
  </script>
</body>
<style>
  #vueController {
    font-family: Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    background-repeat: no-repeat;
    background-size: 100% 100% !important;
    overflow: hidden;
    position: relative;
    width: 100vw;
    height: 100vh;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
  }
</style>
</html>`

    // 以blob形式
    var blob = new Blob([html], { type: "text/plain;charset=utf-8" });
    saveAs(blob, "CodeResult.html");
    _this.$message({
      message: '生成成功',
      type: 'success'
    })
  }
}
